<template>
  <div class="invite-reward-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true">
      <el-form-item label="微信信息:" prop="wxKeyword">
        <el-input
          style="width: 300px"
          v-model="queryParams.wxKeyword"
          placeholder="请输入微信昵称或ID"
          clearable
          @keyup.enter.native="handleQuery">
          <el-button circle slot="append" icon="el-icon-search" @click="handleQuery"></el-button>
        </el-input>
      </el-form-item>
      <el-form-item label="报名信息:" prop="enrollKeyword">
        <el-input
          style="width: 300px"
          v-model="queryParams.enrollKeyword"
          placeholder="请输入报名信息"
          clearable
          @keyup.enter.native="handleQuery">
          <el-button circle slot="append" icon="el-icon-search" @click="handleQuery"></el-button>
        </el-input>
      </el-form-item>
      <el-form-item label="是否支付:" prop="isPay">
        <el-select v-model="queryParams.isPay" placeholder="请选择" clearable @change="handleQuery">
          <el-option key="1" label="是" :value="1"/>
          <el-option key="2" label="否" :value="2"/>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="dataList">
      <el-table-column label="序号" type="index">
        <template slot-scope="scope">
          <span>{{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column label="微信信息" width="200">
        <template slot-scope="scope">
          <div class="info-box">
            <div class="img-box">
              <img :src="scope.row.avatarUrl" alt=""/>
            </div>
            <div class="content-box">
              <div>
                {{ scope.row.nickname }}
              </div>
              <div>
                ID:{{ idDesensit(scope.row.wxId) }}
              </div>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="报名信息">
        <template slot-scope="scope">
          <div>{{ scope.row.enrollName }}</div>
          <div>{{ scope.row.enrollMobile }}</div>
        </template>
      </el-table-column>
      <template v-for="(item,index) in collectRule">
        <el-table-column v-if="index > 1" :label="item.label" :key="item.label">
          <template slot-scope="scope">
            <span>{{ scope.row.enrollOther[index] }}</span>
          </template>
        </el-table-column>
      </template>
      <el-table-column label="邀请数量" prop="inviteNumber"/>
      <el-table-column label="已达成奖励" prop="prizeTitle"/>
      <el-table-column label="是否支付" width="100">
        <template slot-scope="scope">
          <span v-if="scope.row.orderStatus == 2 || scope.row.orderStatus == 5">是</span>
          <span v-else>否</span>
        </template>
      </el-table-column>
      <el-table-column label="核销状态">
        <template slot-scope="scope">
          <span v-if="scope.row.verificationStatus == 1 || scope.row.verificationStatus == 2">{{ scope.row.verificationStatus == 2 ? '已核销':'未核销' }}</span>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column label="核销人">
        <template slot-scope="scope">
          <span v-if="scope.row.verificationStaffId == -1">主账号</span>
          <span v-else-if="scope.row.verificationStaffId != -1">{{ scope.row.realname }}</span>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column label="核销时间">
        <template slot-scope="scope">
          <span v-if="scope.row.verificationStatus == 2">{{ parseTime(scope.row.verificationTime) }}</span>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" class-name="small-padding fixed-width" width="100">
        <template slot-scope="scope">
          <el-button v-if="scope.row.verificationStatus == 1" type="text" @click="goVerification(scope.row.inviteRewardId)">核销</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getInviteRewardList"
    />
    <el-dialog title="核销" :visible.sync="verificationOpen" width="400px">
      <el-input v-model="verificationCode" placeholder="请输入核销码"/>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" size="mini" @click="submitVerification">确 定</el-button>
        <el-button size="mini" @click="verificationOpen = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { activityDetailById, inviteRewardList, inviteRewardVerification } from "@/api/triones/activity";
export default {
  name: "InviteReward",
  props: {
    value: {
      type: Number,String
    }
  },
  data() {
    return {
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        activityId: undefined,
        wxKeyword: undefined,
        enrollKeyword: undefined,
        isPay: undefined
      },
      dataList: [],
      total: 0,
      verificationOpen: false,
      verificationCode: undefined,
      inviteRewardId: undefined,
      activityDetail: {},
      collectRule: []
    }
  },
  created() {
    this.getActivityById();
    this.getInviteRewardList();
  },
  methods: {
    /** 获取活动详情 */
    getActivityById() {
      activityDetailById(this.value).then(response => {
        this.activityDetail = response.data;
        if (response.data) {
          const content = JSON.parse(response.data.content);
          if (content) {
            this.collectRule = content.enroll_info_collect.collect_rule;
          }
        }
      });
    },
    /** 获取邀请奖励列表 */
    getInviteRewardList() {
      this.queryParams.activityId = this.value;
      inviteRewardList(this.queryParams).then(response => {
        this.dataList = response.rows;
        this.total = response.total;
        for (const dataItem of this.dataList) {
          if (dataItem.enrollOther) {
            dataItem.enrollOther = JSON.parse(dataItem.enrollOther);
          }
        }
      })
    },
    /** 检索 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getInviteRewardList();
    },
    /** 去核销 */
    goVerification(id) {
      this.inviteRewardId = id;
      this.verificationCode = undefined;
      this.verificationOpen = true;
    },
    /** 核销 */
    submitVerification() {
      if (!this.verificationCode) {
       return this.$message.error('请输入核销码');
      }
      const params = {
        id: this.inviteRewardId,
        verificationCode: this.verificationCode
      }
      inviteRewardVerification(params).then(response => {
        this.$message.success('核销成功');
        this.verificationOpen = false;
        this.getInviteRewardList();
      })
    },
    /** 重置 */
    resetQuery () {
      this.resetForm('queryForm')
      this.handleQuery()
    }
  }
}
</script>

<style lang="scss" scoped>

::v-deep .el-dialog__body {
  padding: 10px 10px;
}

.invite-reward-container {
  margin: 0;
  padding: 0px 0px 10px;
  box-sizing: border-box;
}

</style>
